<template>
  <div class="container" style="width: 95%;margin: 0 auto">
    <site-nav/>
    <div class="btn-group">
      <el-button type="primary" style="margin: 20px 0"  @click="addCouponVisable = true">添加优惠券</el-button>
    </div>
    <div class="table">
      <el-card class="box-card">
        <el-table
            :data="tableData">
          <el-table-column
              prop="id"
              label="编号"
              sortable>
          </el-table-column>
          <el-table-column
              prop="title"
              label="优惠券名称">
          </el-table-column>
          <el-table-column
              prop="date"
              label="有效期">
          </el-table-column>
          <el-table-column
              prop="price"
              label="用户需支付金额">
            <template slot-scope="scope">
              ￥{{scope.row.price}}
            </template>
          </el-table-column>
          <el-table-column
              prop="dsc"
              label="优惠券说明" min-width="200px">
          </el-table-column>
          <el-table-column
              prop="status"
              label="优惠券状态">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">编辑
              </el-button>
              <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <div class="block" style="float: right;margin-right: 5%;margin-top: 25px">
      <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="1"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400">
      </el-pagination>
      <el-dialog
          title="创建优惠券"
          :visible.sync="addCouponVisable"
          width="600px">
        <el-tabs type="border-card" v-model="coupon_template" @tab-click="changeCT">
          <el-tab-pane label="免费优惠券" name="first">
            <el-form :inline="true" :model="form" class="demo-form-inline" label-width="150px">
              <el-form-item label="优惠套餐：" required="">
                <el-radio v-model="form.good" label="1">普通洗车</el-radio>
                <el-radio v-model="form.good" label="2">蜡水洗车</el-radio>
              </el-form-item>
              <el-form-item label="有效期：" required="">
                <div class="block">
                  <el-date-picker
                      v-model="form.date"
                      type="daterange"
                      range-separator="-"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期">
                  </el-date-picker>
                </div>
              </el-form-item>
              <el-form-item label="优惠券说明：" required="">
                <el-input v-model="form.dsc" placeholder="不可超过25字" style="width: 350px"></el-input>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="定额优惠券" name="second">
            <el-form :inline="true" :model="form" class="demo-form-inline" label-width="150px">
              <el-form-item label="优惠套餐：" required="">
                <el-radio v-model="form.good" label="1">普通洗车</el-radio>
                <el-radio v-model="form.good" label="2">蜡水洗车</el-radio>
              </el-form-item>
              <el-form-item label="有效期：" required="">
                <div class="block">
                  <el-date-picker
                      v-model="form.date"
                      type="daterange"
                      range-separator="-"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期">
                  </el-date-picker>
                </div>
              </el-form-item>
              <el-form-item label="洗车金额：" required="">
                <el-input v-model="form.price" placeholder="用户洗车实际支付金额" style="width: 350px"></el-input>
              </el-form-item>
              <el-form-item label="优惠券说明：" required="">
                <el-input v-model="form.dsc" placeholder="不可超过25字" style="width: 350px"></el-input>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="商家优惠券" name="third">
            <el-form :inline="true" :model="form" class="demo-form-inline" label-width="150px">
              <el-form-item label="优惠券标题：" required="">
                <el-input v-model="form.title" placeholder="优惠券标题" style="width: 350px"></el-input>
              </el-form-item>
              <el-form-item label="有效期：" required="">
                <div class="block">
                  <el-date-picker
                      v-model="form.date"
                      type="daterange"
                      range-separator="-"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期">
                  </el-date-picker>
                </div>
              </el-form-item>
              <el-form-item label="优惠券说明：" required="">
                <el-input v-model="form.dsc" placeholder="不可超过25字" style="width: 350px"></el-input>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addCouponVisable = false">取 消</el-button>
          <el-button type="primary" @click="addCouponVisable = false">立即创建</el-button>
        </span>
      </el-dialog>

    </div>
  </div>
</template>
<script>
  import SiteNav from '@/components/SiteNav'

  export default {
    components: {SiteNav},
    data () {
      return {
        coupon_template: 'first',
        addCouponVisable: false,
        form: {
          title: '',
          type: 1,
          price: '0',
          date: '',
          dsc: '',
          good: '1'
        },
        tableData: [{
          id: '52',
          type: 2,
          date: '2018.05.02-2018.05.08',
          title: '3元洗车',
          price: '3',
          status: '有效',
          dsc: '蜡水洗车1次，仅限1号洗车机使用'
        }, {
          id: '39',
          type: 1,
          date: '2018.04.27-2018.05.05',
          title: '免费洗车券',
          price: '0',
          status: '已失效',
          dsc: '普通洗车1次，首次登录可用'
        }, {
          id: '47',
          type: 3,
          date: '2018.05.20-2018.05.20',
          title: '金龙腾飞车辆体检',
          price: '0',
          status: '未开始',
          dsc: '仅限到店使用（南海大道225号）'
        }]
      }
    },
    methods: {
      formatter (row, column) {
        return row.address
      },
      handleEdit (index, row) {
        console.log(index, row)
      },
      handleDelete (index, row) {
        console.log(index, row)
      },
      handleSizeChange (val) {
        console.log(`每页 ${val} 条`)
      },
      handleCurrentChange (val) {
        console.log(`当前页: ${val}`)
      },
      // 选中免费优惠券模板时触发
      changeCT (tab, event) {
        if (tab.name === 'first') {
          this.form.type = 1
          this.form.price = '0'
          console.log(this.form)
        }
        if (tab.name === 'second') {
          this.form.type = 2
          this.form.price = ''
          console.log(this.form)
        }
        if (tab.name === 'third') {
          this.form.type = 3
          this.form.price = ''
          console.log(this.form)
        }
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>
